import {defineComponent, ref,} from "vuedraggable-es"
import {NUpload, NButton, NUploadDragger, NIcon, NText, NP,} from "naive-ui"
import {ArchiveOutline as ArchiveIcon} from '@vicons/ionicons5'

export default defineComponent({
    name: "myuploadfile",
    props: {
        // 拖动上传
        directoryDnd: {
            type: Boolean,
            default: false,
        },

    },
    setup({directoryDnd,}:any, {attrs}:any) {
        const actionURL = ref("https://www.mocky.io/v2/5e4bafc63100007100d8b70f")
        const fileList = ref([])
        return () => (
            <NUpload
                {...attrs}
                directoryDnd={directoryDnd}
                action={actionURL.value}
                default-file-list={fileList.value}
                v-slots={{
                    default: () => {
                        return directoryDnd ? <NUploadDragger>
                            <div style={"margin-bottom: 12px"}>
                                <NIcon size={48} depth={3}>
                                    <ArchiveIcon/>
                                </NIcon>
                            </div>
                            <NText style={"font-size: 16px"}>
                                点击或者拖动文件到该区域来上传
                            </NText>
                            <NP depth={3} style={"margin: 8px 0 0 0"}>
                                请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码
                            </NP>
                        </NUploadDragger> : <NButton>上传文件</NButton>
                    },
                }}
            />
        )
    },
})
